<template>
  <div>
    <div class="conversation-list-item" :class="{ 'choose': conversation.conversationID === currentConversation.conversationID }" @click="selectConversation">
      <div class="conversation-avatar">
        <Avatar :src="avatar" :type="this.conversation.type" />
      </div>
      <div class="conversation-list-item-wrapper">
        <div class="name-wrapper">
          <div class="conversation-name">
            <span v-if="conversation.type ===  TIM.TYPES.CONV_C2C">
              {{conversation.userProfile.nick || conversation.userProfile.userID}}
            </span>
            <span v-else-if="conversation.type ===  TIM.TYPES.CONV_GROUP">
              {{conversation.groupProfile.name || conversation.groupProfile.groupID}}
            </span>
            <span v-else-if="conversation.type === TIM.TYPES.CONV_SYSTEM">
              系统通知
            </span>
          </div>
          <div class="unread-count">
            <span class="badge" v-if="conversation.unreadCount > 0">
              {{ conversation.unreadCount }}
              <template v-if="conversation.unreadCount > 99">+</template>
            </span>
          </div>
        </div>
        <div class="summary-wrapper">
          <div class="conversation-summary">
            {{ conversation.lastMessage.messageForShow }}
          </div>
          <div class="conversation-summary-date">
            {{ date }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex';
import { isToday, getDate, getTime } from '../../utils/date';

export default {
  props: {
    conversation: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      
    }
  },
  computed:{
    ...mapState({
      currentConversation: state => state.conversation.currentConversation
    }),
    date() {
      if (!this.conversation.lastMessage || !this.conversation.lastMessage.lastTime ) {
        return '';
      }
      const date = new Date(this.conversation.lastMessage.lastTime * 1000);
      if (isToday(date)) {
        return getTime(date);
      }
      return getDate(date);
    },
    avatar() {
      switch (this.conversation.type) {
        case this.TIM.TYPES.CONV_C2C:
          return this.conversation.userProfile.avatar;
        case this.TIM.TYPES.CONV_GROUP:
          return this.conversation.groupProfile.avatar;
        default:
          return '';
      }
    }
  },
  methods:{
    selectConversation(){
      if (this.conversation.conversationID !== this.currentConversation.conversationID) {
        this.$store.dispatch('checkoutConversation', this.conversation.conversationID);
      }
    }
  }
}
</script>

<style scoped>
.conversation-list-item {
  display: flex;
  padding: 10px 20px;
  cursor: pointer;
}
.conversation-avatar {
  width: 40px;
  height: 40px;
}
.conversation-avatar .el-avatar{
  background:white;
}
.conversation-list-item-wrapper {
  flex:1;
  overflow: hidden;
}
.conversation-name {
  flex:1;
  color: #f7f7f8;
  line-height: 20px;
  padding-left: 10px;
  overflow: hidden;
  text-overflow:ellipsis;
}
.unread-count{
  display: flex;
  padding-left:10px;
  flex-shrink:0;
  color:#76828c;
  font-size:12px;
}
.badge{
  vertical-align:bottom;
  background-color:#f35f5f;
  border-radius:10px;
  color:#FFF;
  display:inline-block;
  font-size:12px;
  height:18px;
  max-width:40px;
  line-height:18px;
  padding:0 6px;
  text-align:center;
  white-space:nowrap;
}
.name-wrapper {
  display: flex;
  height: 20px;
}
.summary-wrapper {
  display: flex;
  font-size: 12px;
  height: 20px;
  overflow: hidden;
}
.conversation-summary {
  flex: 1;
  color: #a5b5c1;
  line-height: 20px;
  padding-left: 10px;
  overflow: hidden;
  text-overflow:ellipsis;
}
.conversation-summary-date {
  padding-left:10px;
  flex-shrink:0;
  text-align:right;
  color:#a5b5c1;
}
.choose{
  background-color: #404953;
}
</style>
